<template>
	<view style="font-size: 30rpx;">
		<view class="order_itemBox" v-for="item in drawRecordList" :key="item.id">
			<view class="order_itemDetail">
				<text style="font-size: 24rpx;">{{item.drawTime}}</text>
			</view>
			<view class="goods-order-title">
				<view class="title-goods">商品详情</view>
				<view class="winStatus"> {{item.drawStatus===0?'未中奖':'中奖'}}</view>
			</view>
			<view class="order_container_Details">
				<view class="container_Pics">
					<image :src="item.product.imgurl" class="pics"></image>
					<view class="title">{{item.product.name}}</view>
				</view>
			</view>
			<view class="order_TOpay">
				<view>抽奖积分：</view>
				<view class="result_pay">{{item.product.integral}} </view>
			</view>
		</view>
		<view v-if="drawRecordList.lenght==0" class="noDraw">
			还没有参加抽奖活动
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	export default {
		props: ['currentNum'],
		name: "mydraw",
		data() {
			return {
				drawRecordList: [],
				 formData: {
					orderNo: '',
					lucky: 0,
					account: '',
					size: 10,
					current: 1,

				},
				total: '',
			};
		},
		watch: {
			currentNum(newVal) {
				this.getOrderList(); // 当currentNum变化时重新调用方法
			}
		},
		mounted() {
			this.getOrderList()
		},
		methods: {
			// 传值
			exchangetotal() {
				this.$emit('exchangetotal', this.total)
			},
			// 获取订单
			getOrderList() {
					this.formData.current = this.currentNum
				request.post("/drawrecord/page", this.formData).then(res => {
					if (res.code === 0) { 
						this.drawRecordList = this.drawRecordList.concat(res.data || []);
						this.total = res.total;
						this.exchangetotal();
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.noDraw {
		line-height: 30rpx;
		text-align: center;
		color: #ff5555;
	}

	.order_itemBox {
		margin-top: 10rpx;

		.order_itemDetail {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx;
			color: #868181;
			background-color: white;
			border-bottom: 1rpx solid #eeeeee;

			.order_num {
				color: deepskyblue;
			}
		}

		.goods-order-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			padding: 10rpx;
			border-bottom: 1px solid #eeeeee;

			.title-goods {
			font-size: 30rpx;
				font-weight: 400;
				color: #868181;
			}

			.winStatus {
				color: #ff5555;
				margin-right: 30rpx;
			}
		}

		.order_container_Details {
			padding: 10px;
			border-bottom: 1px solid #eeeeee;
			background-color: white;
			// .container_Details {
			// 	display: flex;
			// 	// justify-content: space-between;
			// 	align-items: center;

			.container_Pics {
				display: flex;
				// width: 30%;

				.pics {
					width: 120rpx;
					margin: 10rpx;
					height: 120rpx;
				}

				.title {
					margin-top: 20rpx;
				}

				// height: 100rpx;
			}

			.container_status {
				display: flex;
				flex: 1;
				justify-content: space-between;
				margin: 20rpx;

				.moneyStyle {
					margin-left: 24px;
				}

				.numStyle {
					margin-right: -94px;
				}

				.payStatus {
					display: flex;
					justify-content: space-between;

					.toPay {
						display: flex;
						justify-content: space-between;

						.payOrder {
							margin: 0 10rpx 0 10rpx;
							// 
							color: blue;
						}
					}

					.cancleOrder {
						color: orange;
					}
				}
			}

		}

		.order_TOpay {
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 20rpx;
			line-height: 40rpx;
			background-color: white;
			border-bottom: 1px solid #eeeeee;

			.result_pay {
				color: red;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
	}
</style>